<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"; xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>URLFORM</title>
    <link th:href="@{/js/layui/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/js/layui/layui.js}"></script>
</head>
<form class="layui-form" action="" lay-filter="example" modelAttribute="url">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>地址基本属性</legend>
    </fieldset>

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="remark" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input" th:value="${url.remark}">
        </div>
        <label class="layui-form-label">CODE</label>
        <div class="layui-input-block">
            <input type="text" name="code" placeholder="请输入编码" autocomplete="off" class="layui-input" th:value="${url.code}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">URL</label>
        <div class="layui-input-block">
            <input type="text" name="url"  autocomplete="off" placeholder="请输入URL" class="layui-input" th:value="${url.url}">
        </div>
        <label class="layui-form-label">参数</label>
        <div class="layui-input-block">
            <input type="text" name="params" placeholder="请输入参数" autocomplete="off" class="layui-input" th:value="${url.params}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">占位符</label>
        <div class="layui-input-block">
            <input type="text" name="splitter"  autocomplete="off" placeholder="请输入占位符明细" class="layui-input" th:value="${url.splitter}">
        </div>
        <label class="layui-form-label">数据项</label>
        <div class="layui-input-block">
            <input type="text" name="responseField" placeholder="请输入解析获取的数据项对应关系" autocomplete="off" class="layui-input" th:value="${url.responseField}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">转发项</label>
        <div class="layui-input-block">
            <input type="text" name="sourceTemplate"  autocomplete="off" placeholder="请输入转发的数据项对应关系" class="layui-input" th:value="${url.sourceTemplate}">
        </div>
        <label class="layui-form-label">解析列</label>
        <div class="layui-input-block">
            <input type="text" name="dataSource" placeholder="请输入解析入库的数据列" autocomplete="off" class="layui-input" th:value="${url.dataSource}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否为数据模板</label>
        <div class="layui-input-block">
            <select name="isSourceTemplate" th:value="${url.isSourceTemplate}">
                <option value=""></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否可用</label>
        <div class="layui-input-block">
            <select name="isUsed" lay-filter="isUsed" th:value="${url.isUsed}">
                <option value=""></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <select name="type" lay-filter="type" th:value="${url.type}">
                <option value=""></option>
            </select>
        </div>
        <label class="layui-form-label">数据库</label>
        <div class="layui-input-block">
            <select name="dataBase" lay-filter="dataBase" th:value="${url.dataBase}">
                <option value=""></option>
            </select>
        </div>
    </div>

    <div th:if="${url.endPoint} != null">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>接收方对端地址信息</legend>
        </fieldset>

        <div class="layui-form-item">
            <label class="layui-form-label">接收方名称</label>
            <div class="layui-input-block">
                <input type="text" name="endPoint.namecn" autocomplete="off" class="layui-input" th:value="${endPoint.namecn}">
            </div>

            <label class="layui-form-label">接收方编码</label>
            <div class="layui-input-block">
                <input type="text" name="endPoint.name" autocomplete="off" class="layui-input" th:value="${endPoint.name}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="endPoint.url" autocomplete="off" class="layui-input" th:value="${endPoint.url}">
            </div>
        </div>
    </div>


    <!--<div th:if="${endPoint.nameSpace} != null">
        <div class="layui-form-item">
            <label class="layui-form-label">NAMESPACE</label>
            <div class="layui-input-block">
                <input type="text" name="endPoint.nameSpace" autocomplete="off" class="layui-input" th:value="${endPoint.nameSpace}">
            </div>

            <label class="layui-form-label">方法名</label>
            <div class="layui-input-block">
                <input type="text" name="endPoint.functionName" autocomplete="off" class="layui-input" th:value="${endPoint.functionName}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">接口类型</label>
            <div class="layui-input-block">
                <select name="type" lay-filter="type" th:value="${endPoint.type}">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </div>-->

   <!-- <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读">
            <input type="checkbox" name="like[daze]" title="发呆">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>-->
    <!--<div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
        </div>
    </div>-->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

        //表单初始赋值
        /*form.val('example', {
            remark: '${url.remark}'
            ,code:'${url.code}'
            ,url:'${url.url}'
            ,params:'${url.params}'
            ,splitter:'${url.splitter}'
            ,responseField:'${url.responseField}'
            ,sourceTemplate:'${url.sourceTemplate}'
            ,dataSource:'${url.dataSource}'
            ,isSourceTemplate:'${url.isSourceTemplate}'
            ,isUsed:'${url.isUsed}'
            ,type:'${url.type}'
            ,dataBase:'${url.dataBase}'
        })*/


    });
</script>